<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-back-button defaultHref="create-from" text="" color="dark"></ion-back-button>
        </ion-buttons>
    <ion-title>Action Document</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="getBtnPopover()">
        <ion-icon name="ios-more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ul class="btnHead-box" *ngIf="isShowBtn">
  <img src="../../../assets/icon/down.svg" alt="">
  <li *ngFor="let item of headBtn" :key="index" (click)="getSwitchBtn(item)">{{item.text}}</li>
</ul>
<!-- <div class="shade" (click)="closeZoom()" *ngIf="isShowBtn"></div> -->
<ion-content>
  <div class="action-box">
    <div *ngFor="let item of actionList;let index=index" >
      <!-- <ion-item color="favorite" lines="none" >
        <ion-label color="light">{{item.ActionTitle}}({{item.WFStatus}})</ion-label>
        <ion-icon slot="end" color="light" name="arrow-forward" mode="ios" *ngIf="!list[index].show" (click)="list[index].show=!list[index].show"></ion-icon>
        <ion-icon slot="end" color="light" name="arrow-down" mode="ios" *ngIf="list[index].show" (click)="list[index].show=!list[index].show"></ion-icon>
      </ion-item> -->
      <!-- <div *ngIf="list[index].show"> -->
        <ion-item lines="none">
          <ion-label color="action" class="titleLabel">{{item.DocRefNumber}}</ion-label>
        </ion-item>
        <ion-item color="action" lines="none">
          <ion-label position="stacked" color="light" class="titleLabel">{{'readAction.ParentDocument'| translate}}:</ion-label>
          <ion-note  color="light">{{item.ParentDocument}}</ion-note>
        </ion-item>
        <ion-item>
          <ion-label color="action" class="titleLabel">{{'readAction.ActionTitle'| translate}}:</ion-label>
          <ion-note slot="end" >{{item.ActionTitle}}</ion-note>
        </ion-item>
        <ion-item>
          <ion-label color="action" class="titleLabel">{{'readAction.EmployeeAssigned'| translate}}:</ion-label>
          <ion-note slot="end">{{item.EmployeeAssigned}}</ion-note>
        </ion-item>
        <ion-item>
          <ion-label position="stacked" color="action" class="titleLabel">{{'readAction.Description'| translate}}:</ion-label>
          <ion-note >{{item.Description}}</ion-note>
        </ion-item>
        <ion-item ngDefaultControl>
            <ion-label color="action" class="titleLabel">{{'readAction.Priotity'| translate}}:</ion-label>
            <ion-note >{{item.Priority}}</ion-note>
            <!-- <ion-select interface="action-sheet" okText="ok" cancelText="clear">
              <div *ngFor="let k of optionData">
                <ion-select-option value="{{k}}">{{k}}</ion-select-option>
              </div>
            </ion-select> -->
        </ion-item>
        <ion-item>
          <ion-label color="action" class="titleLabel">{{'readAction.DueDate'| translate}}:</ion-label>
          <ion-note slot="end">{{item.DueDate}}</ion-note>
        </ion-item>
        <div class="textarea-box">
            <p class="head">{{'readAction.ActionTaken'| translate}}:</p>
            <textarea name="" id="" rows="3" placeholder="Enter textarea" class="textareaS"></textarea>
          </div>
        <ion-item>
          <ion-label position="stacked" color="action" class="titleLabel">{{'readAction.Attachment'| translate}}:</ion-label>
          <!-- <div class="attachmentImg-box" *ngIf="imgSrc.length>0">
            <div class="imgList" *ngFor="let item of imgSrc;let index=index">
              <div class="img-box">
                  <p class="head">Photo:</p>
                  <img [src]="item" alt="">
              </div>
              <div class="att-content">
                  <p class="head">Comments:</p>
                  <p>565655656565556</p>
              </div>
             
              <img src="../../../assets/icon/attachment/delete.png" alt="" class="positionImg" (click)="imgDelect(index)">
            </div> -->
          <div class="attachment-box">
            <img src="../../../assets/icon/add@3x.png" alt="">
            <p>565655656565556</p>
          </div>
        </ion-item>
        <ion-item color="action" lines="none" *ngIf="item.AuditTrail">
          <ion-label color="light" >{{'readAction.AduitTrail'| translate}}</ion-label>
          <ion-icon slot="end" color="light" name="arrow-forward" mode="ios" (click)="showTrail=true" *ngIf="!showTrail"></ion-icon>
          <ion-icon slot="end" color="light" name="arrow-down" mode="ios" (click)="showTrail=false" *ngIf="showTrail" ></ion-icon>
        </ion-item>
        <div *ngIf="showTrail" class="trail-box">{{item.AuditTrail}}</div>
      <!-- </div> -->

    </div>
  </div>

</ion-content>